<template>
  <div class="swiper">
    <!-- indicator-dots 是否显示面板指示点 -->
    <!-- duration 滑动动画时长 -->
    <!-- circular 是否衔接滑动 -->
    <swiper
      :indicator-dots="true"
      indicator-color="#EA5A49"
      :autoplay="true"
      :interval="6000"
      :duration="1000"
      :circular="true"
      >
      <div v-for="(top, imgindex) in imgUrls" :key="imgindex">
        <swiper-item>
          <img
            @click="bookDetail(img)"
            class="slide-image"
            mode="aspectFit"
            v-for="img in top"
            :key="img.id"
            :src="img.image"
            alt="">
        </swiper-item>
      </div>
    </swiper>
  </div>
</template>
<script>
  export default {
    props: ['tops'],
    computed: {
      imgUrls () {
        let res = this.tops
        return [res.slice(0, 3), res.slice(3, 6), res.slice(6)]
      }
    },
    methods: {
      /**
       * 跳转到图书详情页
       * @param item
       */
      bookDetail (item) {
        wx.navigateTo({
          url: '/pages/detail/main?id=' + item.id
        })
      }
    }
  }
</script>
<style lang="scss" type="text/scss">
.swiper{
  margin-top: 5px;
  .slide-image{
    width: 33.3%;
    height: 250rpx;
  }
}
</style>
